<template>
	<view>
		<view class="nav w-full">
			<uni-nav-bar title="拼团" :border="false" :status-bar="true" :fixed="false" background-color="transparent"
				color="#FFF"></uni-nav-bar>

			<view class="tabBox">
				<u-tabs :scrollable="false" :list="tabsList" lineWidth="30" lineColor="#E8372B" :current="tabIndex"
					:activeStyle="{
				            color: '#303133',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" @click="tabClick">
				</u-tabs>
			</view>
		</view>

		<view class="" style="height: 452rpx;">

		</view>

		<view class="mt-48 px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="bg-FFF round-12 p-28 px-16 shadow-20" v-for="(item,index) in list" :key="item.id">
					<view class="" v-if="item.selfOrderNum > 0">
						<view class="flex items-center justify-between">
							<view class="text-grey">
								{{item.createTime}}
							</view>
							<view class="text-FF8400">
								{{item.selfOrderNum}}份
							</view>
						</view>
						<u-divider></u-divider>
					</view>

					<view class="flex items-center">
						<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/pintuan.png"
							class="image-200" mode=""></image>
						<view class="ml-20 flex flex-col justify-around" style="height: 200rpx;">
							<view class="text-36 font-700">
								{{tabsList[tabIndex].name + `第${item.num}期`}}
							</view>
							<view class="flex items-center mt-16" v-if="item.countDown > 0 && item.state == 0">
								<view class="">
									距离团购结束
								</view>
								<u-count-down :time="item.countDown" format="DD-HH:mm:ss" autoStart millisecond
									@change="onChange($event,item)">
									<view class="flex items-center text-F40600" v-if="item.timeData">
										<view class="ml-12" v-if="item.timeData.days>0">
											{{ item.timeData.days }}
										</view>
										<text class="text-333">天</text>
										<view class="">
											{{ item.timeData.hours >= 10 ? item.timeData.hours : '0' + item.timeData.hours }}
										</view>
										<text class="text-333">时</text>
										<view class="">
											{{ item.timeData.minutes >= 10 ? item.timeData.minutes : '0' + item.timeData.minutes }}
										</view>
										<text class="text-333">分</text>
										<view class="">
											{{ item.timeData.seconds >= 10 ? item.timeData.seconds : '0' + item.timeData.seconds }}
										</view>
										<text class="text-333">秒</text>
									</view>
								</u-count-down>
							</view>
							<view class="button text-center round-4" :style="{
								background:item.state == 0 ? '#FA554E' : item.state == 1 ? '#DC9C52' : '#EDEDED',
								color:item.state == 2 ? '#ADADAD' : '#FFF'
							}" @click="panicShow(item)">
								{{item.state == 0 ? '立即抢购' : item.state == 1 ? '待结算' : '已结算' }}
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</view>

		<u-popup :show="isPanic" mode="center" bgColor="transparent">
			<view class="panic round-20 p-32 flex flex-col items-center">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/qianggoufenshu.png"
					style="width: 176rpx;" mode="widthFix"></image>

				<view class="text-24 text-C5B28A mt-20	">
					需抢购/份
				</view>

				<view class="mt-20 text-40 font-700 text-B38E45">
					4-40
				</view>

				<input type="text" class="mt-36 px-28" placeholder="请输入抢购份数" placeholder-style="color:#8F7E5D"
					v-model="panicValue" />

				<view class="panCon text-FFF text-center mt-40" @click="confirm">
					立即抢购
				</view>

				<view class="mt-20 text-B38E45" @click="isPanic = false">
					取消
				</view>
			</view>
		</u-popup>

		<view class="" v-if="flag">

		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		data() {
			return {
				tabsList: [],
				tabIndex: 0,
				list: [],
				isPanic: false,
				panicValue: "",
				groupNumId: null,
				groupId: null,
				flag: false
			};
		},
		onLoad() {
			thro = this
			this.getData()
		},
		methods: {
			onChange(e, item) {
				item.timeData = e
				this.flag = !this.flag
			},
			panicShow(item) {
				if (item.state == 0) {
					if (this.$store.getters.userInfo.verifyState != 1) {
						this.$modal.confirm('签到需要先进行实名认证!').then(con => {
							if (con) {
								this.$tab.nav('/pages/mine/realPerson/index')
							}
						})
						return
					}
					this.groupNumId = item.id
					this.groupId = item.groupId
					this.isPanic = true
				}
			},
			confirm: throttle(2000, async () => {
				const res = await thro.$Api.currency.joinGroupNum({
					number: thro.panicValue,
					groupNumId: thro.groupNumId,
					groupId: thro.groupId
				})
				console.log(res, '抢购')
				thro.isPanic = false
				thro.refresh()
			},{
				noTrailing:true
			}),
			tabClick(e) {
				this.tabIndex = e.index
				this.refresh()
			},
			async getData() {
				const res = await this.$Api.currency.groupList()
				console.log(res, 'tabs')
				this.tabsList = res.data
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.currency.groupNumList({
						pageNum: pullScroll.page,
						pageSize: 10,
						groupId: this.tabsList[this.tabIndex].id
					})

					this.list = this.list.concat(res.rows || []);

					this.list.forEach(item => {
						item.timeData = null
					})

					if (res.total == 0) {
						pullScroll.empty();
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.nav {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		height: 432rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/common/img_pingtuan@2x.png');
		background-size: 100% 100%;

		.tabBox {
			height: 88rpx;
			background: #FFFFFF;
			position: absolute;
			width: 100%;
			left: 0;
			bottom: -44rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.button {
		width: 196rpx;
		height: 76rpx;
		line-height: 76rpx;
	}

	.panic {
		width: 544rpx;
		background: linear-gradient(180deg, #FEF3DD 0%, #FFD88B 100%);


		input {
			width: 484rpx;
			height: 76rpx;
			background: #F9DA9C;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.panCon {
			width: 484rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #E64A3A 0%, #EF0000 100%);
			border-radius: 196rpx 196rpx 196rpx 196rpx;
			line-height: 80rpx;
		}
	}
</style>